<template>
    <div class="tools">
        <div v-if="showParent">
            <div class="tools-item" @click="jumpTo(item.path)" v-for="(item, index) in toolList" :key="index">
                <div class="tools-item-name">{{ item.name }}</div>
                <img :src="getImg(item.icon)" alt="" srcset="">
            </div>
        </div>
        <router-view></router-view>
    </div>
</template>
<script setup>
import { ref ,computed} from 'vue'
import { useRouter } from 'vue-router'
import { RouterView } from 'vue-router';
const toolList = ref([
    {
        path: 'zipPng',
        name: '图片压缩',
        icon: 'zip'
    },
    {
        path: 'bigFile',
        name: '大文件上传',
        icon: 'zip'
    },
    {
        path: 'video',
        name: '视频处理',
        icon: 'zip'
    },
])
const router = useRouter()

const showParent = computed(()=>{
    return router.currentRoute.value.name === 'tools'
})
const getImg = (icon) => {
    return new URL(`../../assets/imgs/tools/${icon}.png`, import.meta.url).href
}

const jumpTo = path => {
    console.log(path)
    router.push({
        name: path
    })
}

</script>
<style lang="scss" scoped>
.tools {
    max-width: 1200px;
    padding: 20px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;

    .tools-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0 48px;

        img {
            width: 120px;
            height: 120px;
        }
    }
}
</style>